<%@ page import="java.util.Map" %>
<%@ page import="java.util.Collection" %>
<%@ page import="org.dreamwork.jasmine2.restful.*" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>Restful API Info.</title>
    <style>
        * {font-size: 14px; font-family:"Microsoft Yahei", monospace;background-color: #f9f9f9;padding: 0;margin:0}
        #content {margin-left: 20px;}

        .restful-api-title {font-size: 28px;}
        .api-item {margin: 0 auto 15px auto; padding:0;}
        .method-table {margin-bottom: 20px;margin-left: 20px;}
        .method-table td, .method-table th {padding: 5px; vertical-align: top;}
        .method-table th {text-align: left}
        .pattern {font-size: 20px;display: block; background-color: #b0e0e6; padding:10px;}
        .api-description {font-size: 18px; line-height: 180%; padding:10px;}
        .content-table {top: 20px; right: 20px; border: 1px solid #ccc;position: fixed}
        .content-table-item {color: #000; cursor: pointer; display: block; text-decoration: none; padding: 5px 10px;}
        .content-table-item:hover {background-color: #b0e0e6;}
        .content-table-header {background-color: #b0e0e6;font-weight: bold; text-align: left; padding: 10px;}
        .sub-content-table-item {padding-left: 30px;}
        .content-item {list-style: none;}
        .sub-table {border:1px solid #ccc; border-collapse: collapse}
        .sub-table td, .sub-table th {padding: 5px 20px 5px 5px; vertical-align: top; border-bottom: 1px dashed #ccc;}
        .sub-table-header th {background-color: #b0e0e6; border-bottom: 1px solid #ccc;}
        .method {margin-left: 20px;}
        .method-title {background-color: #b0e0e6; padding:10px;display: block}
        .transparent {filter: alpha(30);opacity: .3;}

        .close-button {
            margin-left: 60px;
            display:block;width:16px; height:16px;line-height:16px; cursor: pointer;
            text-align: center; border: 1px solid #ccc; background-color: #fff;color:#000;
            float: right;
        }
        .close-button:hover {color:#fff;background-color: #6495ed}
    </style>
</head>
<body>
<%
    @SuppressWarnings ("unchecked")
    Map<String, APIDefinition> map = (Map<String, APIDefinition>) application.getAttribute (RestfulAPIManager.KEY_API_MAPPING);
    if (map != null && !map.isEmpty ()) {
%>
<div class="content-table transparent" id="content-table">
    <h1 class="content-table-header">
        Content Table <a class="close-button" id="close-button">+</a>
    </h1>
    <ul id="content-table-list" style="display: none">
        <%  for (APIDefinition api : map.values ()) {%>
        <li class="content-item">
            <a class="content-table-item" href="#<%= api.getPattern()%>"><%= api.getTitle ()%></a>
            <%  if (!api.getMethods ().isEmpty ()) {%>
            <ul>
                <%  for (MethodDefinition md : api.getMethods ().values ()) {%>
                <li class="content-item">
                    <a class="content-table-item sub-content-table-item" href="#<%= api.getPattern()%>/<%= md.getPattern()%>"><%= md.getTitle()%></a>
                </li>
                <%}%>
            </ul>
            <%}%>
        </li>
        <%}%>
    </ul>
</div>
<%  }%>
<%if (map != null && !map.isEmpty ()) {%>
<div id="content">
    <h1 class="restful-api-title"><%= RestfulAPIContext.getTitle()%></h1>
    <div class="restful-api-description"><%= RestfulAPIContext.getDescription()%></div>
<%  for (APIDefinition api : map.values ()) {%>
    <div class="api-item">
        <a  class="pattern" name="<%= api.getPattern ()%>"><%= api.getTitle ()%></a>
        <div class="api-description"><%= api.getTitle ()%></div>
<%
    Map<String, MethodDefinition> methods = api.getMethods ();
    if (!methods.isEmpty ()) {
%>
        <div class="method">
<%  for (MethodDefinition method : methods.values()) {
    Collection<ContextParameterDefinition> c = method.getRequiredContextParameter ();
    c.addAll (api.getRequiredContextParameter ());
    StringBuilder builder = new StringBuilder ();
    for (ContextParameterDefinition cpd : c) {
        if (builder.length () > 0) builder.append ('&');
        builder.append (cpd.getName ()).append ("=${").append (cpd.getName ().toUpperCase ()).append ("}");
    }
    MethodType type = method.getType ();
    if (type == MethodType.GET) {
        List<APIParameterDefinition> list = method.getParameters ();
        for (APIParameterDefinition pd : list) {
            if (builder.length () > 0) builder.append ('&');
            builder.append (pd.getName ()).append ("=${").append (pd.getName ().toUpperCase ()).append ('}');
        }
    }
    String url = api.getPattern () + '/' + method.getPattern ();
    if (builder.length () > 0) url += "?" + builder;
%>
        <!-- method <%= method.getPattern()%> -->
        <a name="<%= api.getPattern()%>/<%= method.getPattern()%>" class="method-title"><%= method.getTitle ()%></a>
        <table class="method-table">
            <tr>
                <th>URL</th>
                <td class="padding5"><%= url%></td>
            </tr>
            <tr>
                <th>Method</th>
                <td class="padding5"><%= method.getType ()%></td>
            </tr>
            <tr>
                <th>Description</th>
                <td><%= method.getDescription()%></td>
            </tr>
<%if (!c.isEmpty ()) {%>
            <tr>
                <th>Context</th>
                <td>
                    <p>以下参数为调用该API的<strong>必须参数</strong>，并且<strong>无论是HTTP GET还是HTTP POST，都将出现在Query String 上</strong></p>
                    <table class="sub-table">
                        <tr class="sub-table-header">
                            <th>参数名</th>
                            <th>描述</th>
                        </tr>
<%for (ContextParameterDefinition cpd : c) {%>
                        <tr>
                            <th><%= cpd.getName()%></th>
                            <td><%= cpd.getDescription() == null ? "" : cpd.getDescription()%></td>
                        </tr>
<%}%>
                    </table>
                </td>
            </tr>
<% }
    List<APIParameterDefinition> list = method.getParameters ();
    if (!list.isEmpty ()) {
%>
            <tr>
                <th>Parameters</th>
                <td>
                    <table class="sub-table">
                        <tr class="sub-table-header">
                            <th>参数名</th>
                            <th>参数类型</th>
                            <th>描述</th>
                        </tr>
<%for (APIParameterDefinition pd : list) {%>
                        <tr>
                            <th><%= pd.getName()%></th>
                            <td><%= pd.getType().getCanonicalName()%></td>
                            <td><%= pd.getDescription()%></td>
                        </tr>
<%}%>
                    </table>
                </td>
            </tr>
<%  }
    if (!method.getResultDefinition ().isEmpty ()) {
%>
            <tr>
                <th>Returns</th>
                <td>
                    <table class="sub-table">
                        <tr class="sub-table-header">
                            <th>字段名</th>
                            <th>是否必须</th>
                            <th>字段类型</th>
                            <th>描述</th>
                        </tr>
<%
    List<ResultFieldDefinition> results = method.getResultDefinition ();
    for (ResultFieldDefinition field : results) {
%>
                    <tr>
                        <th><%= field.getName()%></th>
                        <td><%= field.isMandatory() ? "Y" : ""%></td>
                        <td><%= field.getType()%></td>
                        <td><%= field.getDescription() == null ? "" : field.getDescription()%></td>
                    </tr>
<%
    }
%>
                </table>
                </td>
            </tr>
<%  }%>
        </table>
<%}%>
        </div>
<%}%>
    </div>
<%}%>
</div>
<%}%>
<script type="text/javascript" language="javascript">
    var button = document.getElementById ('close-button'),
          list = document.getElementById ('content-table-list'),
         table = document.getElementById ('content-table');
    button.onclick = function () {
        if (button.innerHTML == '+') {
            table.className = 'content-table';
            list.style.display = 'block';
            button.innerHTML = '-';
        } else if (button.innerHTML == '-') {
            table.className = 'content-table transparent';
            list.style.display = 'none';
            button.innerHTML = '+';
        }
    }
</script>
</body>
</html>